<template>
  <div>
    <el-descriptions
      :column="column"
      :size="size"
      :border="border"
      :title="$t('form.viewOrUpdate.basicInformation')"
    >
      <el-descriptions-item
        v-for="field in fixedFields"
        :key="field.value"
        :label="field.label"
      >
        <span v-if="field.value === 'submitUaOs'">
          {{ currentFormModel.submitUa ? currentFormModel.submitUa.os.name : "" }}
          {{ currentFormModel.submitUa ? currentFormModel.submitUa.os.version : "" }}
        </span>
        <span v-else-if="field.value === 'submitBrowser'">
          {{ currentFormModel.submitUa ? currentFormModel.submitUa.browser.name : "" }}
          {{ currentFormModel.submitUa ? currentFormModel.submitUa.browser.version : "" }}
        </span>
        <span v-else-if="field.value === 'submitUaDevice'">
          {{ currentFormModel.submitUa ? currentFormModel.submitUa.device : "" }}
        </span>
        <span v-else-if="field.value === 'wxUserInfo'">
          {{ currentFormModel.wxUserInfo ? currentFormModel.wxUserInfo.nickname : "" }}
          <div>
            <span>unionId</span>
            : {{ currentFormModel.wxUserInfo ? currentFormModel.wxUserInfo.unionId : "" }}
          </div>
        </span>
        <span v-else-if="field.value === 'completeTime'">
          {{ formatMilliseconds(currentFormModel.completeTime) }}
        </span>
        <span v-else>
          {{ currentFormModel[field.value] }}
        </span>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script setup>
import { defineProps } from "vue";

const props = defineProps({
  fields: {
    type: Array,
    default: () => []
  },
  fixedFields: {
    type: Array,
    default: () => []
  },
  formKey: {
    type: String,
    default: ""
  },
  currentFormModel: {
    type: Object,
    default: () => {}
  },
  column: {
    type: Number,
    default: 1
  },
  size: {
    type: String,
    default: "small"
  },
  border: {
    type: Boolean,
    default: false
  }
});

const formatMilliseconds = ms => {
  // 计算总秒数
  const totalSeconds = Math.floor(ms / 1000);
  // 计算小时、分钟和秒
  const hours = Math.floor(totalSeconds / 3600);
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  const seconds = totalSeconds % 60;

  // 格式化为两位数
  const formatNumber = num => num.toString().padStart(2, "0");

  // 返回格式化后的字符串
  return `${formatNumber(hours)}:${formatNumber(minutes)}:${formatNumber(seconds)}`;
};
</script>

<style scoped lang="scss"></style>
